<template>
  <div v-if="showFullScreenBtn" style="align-items: center;display: flex;justify-content: center">
    <Tooltip :content="state.isFullScreen?'退出全屏':'全屏'" placement="bottom">
      <Icon :type="state.isFullScreen?'ios-contract': 'ios-expand'" size="24" style="cursor: pointer;margin-top: 24px"
            @click="handleFullScreen"></Icon>
    </Tooltip>
  </div>
</template>

<script setup>
import {computed, reactive} from "vue";
import screenfull from "screenfull";

// 判断浏览器是否支持全屏
const showFullScreenBtn = computed(() => {
  return screenfull.isEnabled
})

// 默认全屏
const state = reactive({
  isFullScreen: false
})

// 处理全屏
const handleFullScreen = () => {
  let main = document.body;
  console.log(main, screenfull.isFullscreen)
  if (state.isFullScreen) {
    screenfull.exit()
    state.isFullScreen = false
    console.log(screenfull.isFullscreen)
  } else {
    screenfull.request(main)
    state.isFullScreen = true
    console.log(screenfull.isFullscreen)
  }
}


</script>

<style scoped>

</style>
